<!DOCTYPE html>
<%@ page errorPage="../error/Error.jsp" contentType="text/html;charset=UTF-8"
	import="java.util.*,com.unitedats.HR.Entity.*,com.unitedats.common.util.*"%>
<%
	HrDepartment rootDep = (HrDepartment) request.getAttribute("rootDep");
    if(rootDep == null)
    	throw new Exception("There is no root node added for organization chart");
%>
<html>
<head>

<script> 
function getNextLevel(obj){
	
    var parents = $("select[name='parent']");
    var objIndex = parents.index($(obj));
    parents.slice(objIndex + 1).remove();
 // parents = $("select[name='parent']"); // refresh the set after removing
    
    var parentId = $(obj).val(); 
    
    if(parentId != ""){
	    $.getJSON("DepartmentAddDisplay",{parentId: parentId}, function(data){
		    if (data.length > 0 ){
		    	 $("select[name='parent']:last").after("<select class='multilevel_combo' name='parent' onChange='getNextLevel(this)' ><option value=''> Please Select </option></select>");
		         $.each(data, function (index, value) {
		        	 $("select[name='parent']:last").append($('<option>').text(value.name).attr('value', value.id));
		         });
		    }
	    });
    }
}
/*

var selectedParentIndex = $(obj).selectedIndex;

if (levelNum != 0){
    $("#dep_parent").find("select").each(function (){
        var elemId = $(this).prop('id');
        if (elemId != "undefined" && elemId.split("_")[1] > levelNum){
            $(this).prev("br").remove();
            $(this).remove();
        }
    });
}

var currentLevelNum = levelNum+1;
$.getJSON("DepartmentAddDisplay",{parentId: $(obj).find('option:selected').val()  , level : currentLevelNum }, function(data){
    if (data.length > 0 ){
         $("#dep_parent").append("<br /><select style='width:200px;' name='parent' onChange='getNextLevel(this,"+currentLevelNum+")' id='level_"+currentLevelNum+"'></select>"); 
         $("#level_"+currentLevelNum).append("<option value=''> Please Select </option>");
         $.each(data, function (index, value) {
             $("#level_"+currentLevelNum).append($('<option>').text(value.name).attr('value', value.id));
         });
    }
});
*/  


/*
function setDestinationURL(url){
    $('form').attr('action',url);
    $('form').submit();
}
*/

$(function (){
	$("select[name='parent']:first").change();
	$("#dep_view_cont").load("DepartmentChartDisplay?mode=view");	
});

</script>
<title>Add Department</title>
</head>
<body>
	<form name="depForm" id="depForm" method="post"
		action="DepartmentAddProcess">
		<table class="layout_grid">
			<tr>
				<td colspan="2"><h1 class="page_title">Add Department</h1></td>
			</tr>
			<tr>
				<td class="side_label_top">parent :</td>
				<td id="dep_parent">
					<select class="multilevel_combo auto_off" name="parent" onChange="getNextLevel(this)">
						<option value="<%=rootDep.getId()%>"><%=rootDep.getName()%></option>
				    </select>
				</td>
			</tr>
			<tr>
				<td class="side_label_middle">name:</td>
				<td><input type="text" name="name" id="name" size="60" required></td>
			</tr>
			<!--  
    <tr>
      <td valign="top">description : </td>
      <td><textarea name="description" id="description"></textarea></td>
    </tr>
    
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    -->
			<tr>
				<td>&nbsp;</td>
				<td><input type="submit" name="add" value="Add Department"></td>
			</tr>
			<tr>
				<td colspan="2">&nbsp;</td>
			</tr>
		</table>
		<div id="dep_view_cont"></div>
		<!--<input type="hidden" id="dest" name="dest" value="DepartmentAddDisplay"/>-->
	</form>
</body>
</html>
